<!DOCTYPE html>
<html lang="en">

<head>
    <title>bootstrap 案例</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">学生成绩管理系统</h1>
            <span class="badge badge-success">Success</span>
        </div>
    </div>
    <div class="container ">
        <div class="d-flex justify-content-between my-4">
            <input type="text" placeholder="请输入学号" class="" name="xue" style="width: 250px;" value="">
            <input type="text" placeholder="请输入姓名" class="" name="xing" style="width: 250px;">
            <input type="text" placeholder="请输入分数" class="" name="fen" style="width: 250px;">
            <button type="button" class="btn btn-primary  " style="width: 250px;" id="btn">保存</button>
        </div>
        <table class="table table-bordered text-center">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">学号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">分数</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        let list = [];
        const btn = document.querySelector('#btn');
        const input1 = document.querySelector('input[name="xue"]');
        const input2 = document.querySelector('input[name="xing"]');
        const input3 = document.querySelector('input[name="fen"]');


        btn.addEventListener('click', add);
        function add(e) {
            // 将值放入数组
            if (input1.value != '' && input2.value != '' && input3.value != '') {

                list.push({ id: input1.value, aname: input2.value, num: input3.value });

                input1.value = '';
                input2.value = '';
                input3.value = '';

                render(list)

                // console.log(list);
            } else {
                console.log('请勿填入空信息！！');
            }

        }

        function render(_list) {
            const tb = document.querySelector('tbody');
            // 每次重新渲染先清空
            tb.innerHTML = '';

            _list.reduce((acc, item) => {
                const tr = document.createElement('tr');
                const td1 = document.createElement('td');
                const td2 = document.createElement('td');
                const td3 = document.createElement('td');

                td1.innerText = item.id;
                td2.innerText = item.aname;
                td3.innerText = item.num;

                tr.append(td1, td2, td3);
                tb.appendChild(tr);
                return acc;
            }, tb)
        }

    </script>
</body>

</html>